<template>
  <div >
      <div class="list">
          <div class="item" v-for="(item,index) in list " :key="index" @click="goMzDetail(item)">
              <!--<router-link :to="{path:'/mjzcf/detail'}">-->
                <div class="left fl">
                        <p class="title">
                            {{item.yymc}}
                            <span>{{item.ksmc}}</span>
                        </p>
                        <p>就诊人：{{nameAndAge.xm}}</p>
                        <p>就诊日期：{{item.jzrq}}</p>
                </div>
                <div class="right fr">
                    
                        <img src="../../assets/images/arrow-right.png" alt="">
                    
                    
                </div>
              <!--</router-link>-->
          </div>
      </div>
      <!-- 数据仅供参考提示，hosName通过接口获得，在该组件赋值传给子组件，首页不需要传值，默认为空 -->
      <tips :hosName="hosName"></tips>
      <!-- 水印 -->
        <div class="watermark"></div>
  </div>
</template>

<script>
import tips from '@/components/tips.vue'
import { getCISPrescriptionListApi} from '@/api/healthRecords'
export default {
  name: 'mjzcf',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
        hosName:JSON.parse(localStorage.getItem('mzjbxx')).yymc,//医院名称
        nameAndAge:JSON.parse(localStorage.getItem('jbxx')),
        list:[],
        zjhm:JSON.parse(localStorage.getItem('zjhm'))
    }
  },

    methods:{
        goMzDetail(item) {
            this.$router.push({ path:'/mjzcf/detail', query: {  } });
            localStorage.setItem('mzjbxx',  JSON.stringify(item))
        },
        // 1.2.5 门诊检验报告信息getLISIndicators
        getCISPrescriptionList() {
            getCISPrescriptionListApi(JSON.stringify(this.zjhm)).then(response => {
                if (response.data.code == 1) {
                    this.list = response.data.data
                }
            })
        }
    },
    created(){
        this.getCISPrescriptionList();
    },
  components:{
      tips
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.fl{
    float:left;
}
.fr{
    float:right;
}
.list{
    .item{
        overflow: hidden;
        padding:1rem;
        background: #fff;
        margin-bottom: 1rem;
        font-size: 1rem;
        
        a{
            color:#969696;
        }
        .left{
            width: 90%;
            p{
                margin-bottom:0.2rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                span{
                    margin-left:1rem;
                }
            }
            .title{
                font-size: 1.2rem;
                color: #333333;
                font-weight: bold;
            }
        }
        
        .right{
            width: 10%;
            padding-top:0.3rem;
            text-align: right;
            img{
                width: 0.8rem;
                vertical-align: middle;
            }
        }
        
    }
    .item:last-child{
        margin-bottom:0;
    }
}
</style>
